import React, { Component } from 'react';
import Lexer from './Lexer';
import rangy from 'rangy'

class Editor extends Component{
  constructor(props){
    super(props)
    console.log(props,'props')
    console.log(props.keyWords,'props keywords')
    this.keyWords = props.keyWords;
    console.log(this.keywords,'keywords');
    this.keyWordElementArray = []
    this.keyWordClass = "keyword"
    this.sourceCode = ''
  }

  getContent() {
    return this.divInstance.innerText
  }

  changeNode(n){

    this.sourceCode = n.innerText
    this.keyWordElementArray = []
    let lexer = new Lexer(n.innerText)
    lexer.setLexingObserver(this,n)
    lexer.lexing()
  }

  notityTokenCreation(token, elementNode,begin,end){
    if(this.keyWords[token.literal] !== undefined){
      var e = {}
      e.node = elementNode
      e.begin = begin
      e.end = end
      e.token = token
      elementNode.keyWordsCount++
      this.keyWordElementArray.push(e)
    }
    console.log(this.keyWordElementArray,'keyWordElementArray')
  }

  hightLightSyntax(){
    var i;
    let start = 0;
    if(this.keyWordElementArray.length > 0){
      this.divInstance.innerHTML = "";
    }
    
    console.log(this.sourceCode)
    for(i = 0; i< this.keyWordElementArray.length;i++){
      let before = this.sourceCode.substr(start,this.keyWordElementArray[i]['begin']-start)
      before = this.changeSpaceToNBSP(before)
      let span = document.createElement("span")
      span.innerText = before
      this.divInstance.appendChild(span)

      let key = this.sourceCode.substr(this.keyWordElementArray[i]['begin'],this.keyWordElementArray[i]['end'] - this.keyWordElementArray[i]['begin'])
      let keydom = document.createElement("span")
      keydom.style.color = "red"
      keydom.innerText = key
      this.divInstance.appendChild(keydom)

      start = this.keyWordElementArray[i]['end']

      if(i === this.keyWordElementArray.length -1){
        let last = this.sourceCode.substr(this.keyWordElementArray[i]['end'],this.sourceCode.length - this.keyWordElementArray[i]['end'])
        last = this.changeSpaceToNBSP(last)
        span = document.createElement("span")
        span.innerText = last
        this.divInstance.appendChild(span)
      }
    }
    this.keyWordElementArray = []
  }



  //文章地址  https://cloud.tencent.com/developer/article/1159482?from=information.detail.js%E8%8E%B7%E5%8F%96%E5%85%89%E6%A0%87%E6%89%80%E5%9C%A8%E8%A1%8C
  changeSpaceToNBSP(str){
    var s = ""
    for(var i = 0; i < str.length; i++ ){
      if(str[i] === ' '){
        s+= '\u00a0'
      }else{
        s += str[i]
      }
    }
    return s

  }


  onDivContentChange(evt) {
    if (evt.key === 'Enter' || evt.key === " ") {
        return
    }

    var bookmark = undefined
    if (evt.key !== 'Enter') {
      //rangy 是谷歌的一个组件
        bookmark = rangy.getSelection().getBookmark(this.divInstance)
        console.log("bookmark",bookmark,"keyword",this.keyWords)

    }

    var spans = document.getElementsByClassName(this.keyWordClass);
    while (spans.length) {
        var p = spans[0].parentNode;
        var t = document.createTextNode(spans[0].innerText)
        p.insertBefore(t, spans[0])
        p.removeChild(spans[0])
    }

    //把所有相邻的text node 合并成一个
    this.divInstance.normalize();
    this.changeNode(this.divInstance)
    this.hightLightSyntax()

    if (evt.key !== 'Enter') {
        rangy.getSelection().moveToBookmark(bookmark)
    }

}

  render(){
    let textAreaStyle = {
      height:480,
      border:"1px solid black"
    }

    return (
      <div contentEditable={true}
      style={textAreaStyle} onKeyUp={this.onDivContentChange.bind(this)}
      ref={(ref)=>{this.divInstance=ref}}>
      </div>
    )
  }
}

export default Editor